<template>
  <view class="login-container">
    <view class="bg">
      <img src="../static/login_bg.png" alt="" />
    </view>

    <!-- 输入框 -->
    <view class="main">
      <!-- 欢迎 -->
      <view class="title">
        <h2>{{ isLogin ? '欢迎来到登录界面' : '欢迎来到注册界面' }}</h2>
      </view>
      <!-- 	学号 -->
      <view class="inp-box">
        <uni-icons type="person" size="24" color="#42c7ff"></uni-icons>
        <input v-model="stuId" type="text" placeholder="请输入学号" />
      </view>
      <!-- 	密码 -->
      <view class="inp-box">
        <uni-icons type="locked" size="24" color="#42c7ff"></uni-icons>
        <input v-model="pwd" type="password" placeholder="请输入密码" />
      </view>
      <!-- 再次输入密码 -->
      <view class="inp-box" v-if="!isLogin">
        <uni-icons type="locked" size="24" color="#42c7ff"></uni-icons>
        <input v-model="OnceMorepwd" type="password" placeholder="请再次输入密码" />
      </view>
      <!-- 确认按钮 -->
      <view class="btn">
        <button class="login" @click="goBack">{{ isLogin ? '登录' : '注册' }}</button>
      </view>
    </view>

    <!-- 提示信息弹窗 -->
    <uni-popup ref="message" type="message">
      <uni-popup-message type="error" :message="tips" :duration="2000"></uni-popup-message>
    </uni-popup>
  </view>
</template>

<script>
import { registerAsync } from '@/api/user.js'
import { getUserInfoAsync } from '@/api/forum.js'

export default {
  data () {
    return {
      stuId: '',
      pwd: '',
      OnceMorepwd: '',
      // 提示框文字
      tips: '',
      token: '',
      isLogin: '',
    }
  },
  onLoad (options) {
    this.isLogin = Number(options.isLogin)
  },
  methods: {
    async goBack () {
      //判空
      if (this.stuId.trim() === '' || this.pwd.trim() === '') {
        this.reset()
        return this.messageToggle('学号或密码不能为空！')

      }

      if (!this.isLogin && this.pwd !== this.OnceMorepwd) {
        this.reset()
        return this.messageToggle('两次输入的密码不一致！')
      }

      try {
        if (!this.isLogin) {
          try {
            const res = await registerAsync({
              'username': this.stuId,
              'password': this.pwd
            })

            if (res.data.code !== 200) {
              this.reset()
              return this.messageToggle(res.data.msg)
            } else {
              this.stuId = res.data.data
            }
          } catch (error) {
            this.reset()
            this.messageToggle(error.msg)
            console.log('%c [  ]-108', 'font-size:13px; background:pink; color:#bf2c9f;', error)
          }
        }

        try {
          //登录
          const { data } = await uni.$http.post('login', {
            stuId: this.stuId,
            password: this.pwd,
          })
          console.log(data)
          if (data.code != 200) {
            this.reset()
            return this.messageToggle('学号或密码错误，请重新输入！')
          }
          const token = data.data.toString()
          this.$store.commit('user/setToken', token)
          console.log(token, this.token)
          //   获取用户信息
          this.$store.dispatch('user/getUserInfo', token)

        } catch (error) {

          console.log('%c [  ]-114', 'font-size:13px; background:pink; color:#bf2c9f;', error)
        }

        const path =
          getCurrentPages()[getCurrentPages().length - 2].route.split('/')[2]
        if (path === 'my') {
          return uni.navigateBack({
            success () {
              if (this.isLogin) {
                uni.$emit('param', { data: 3 })
              } else {
                uni.$emit('param', { data: 4 })
              }
            },
          })
        } else {
          return uni.navigateBack()
        }
      } catch (error) {
        this.reset()

        console.error(error)
      }

      // const token = '123';
      // this.$store.commit('user/setToken', token);
    },
    // 登录请求
    async postLoginasync () {

    },
    async register () {

    },
    // 封装提示框
    messageToggle (tips) {
      this.tips = tips
      this.$refs.message.open()
    },
    reset () {
      this.stuId = ''
      this.pwd = ''
      if (!this.isLogin) {
        this.OnceMorepwd = ''
      }
    }
  },
}
</script>

<style lang="scss">
.login-container {
  height: 100vh;
  box-sizing: border-box;
  background-color: #fff;

  .bg {
    width: 100vw;
    height: 30vh;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .main {
    width: 90%;
    box-sizing: border-box;
    background-color: #fff;
    margin: 0 auto;

    .title {
      h2 {
        text-align: center;
        font-size: 40rpx;
        height: 100rpx;
        line-height: 100rpx;
        letter-spacing: 10rpx;
        color: #42c7ff;
      }
    }

    .inp-box {
      display: flex;
      align-items: center;
      margin-top: 20rpx;
      border: 1rpx solid #dfdfdf;
      padding: 0 20rpx;
      height: 80rpx;

      uni-icons {
        margin-right: 20rpx;
      }

      input {}
    }

    .btn {
      margin-top: 60rpx;

      .login {
        background-color: skyblue;
        color: #fff;
      }
    }
  }
}
</style>
